<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ADMIN</title>
    <%@include file="common.jsp" %>
    	<!-- BOOTSTRAP STYLES-->
    <link href="../css/bootstrap.css" rel="stylesheet" />
     <!-- FONTAWESOME STYLES-->
    <link href="../css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
    <link href="../css/custom.css" rel="stylesheet" />
     <!-- GOOGLE FONTS-->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
	<script src="../js/custom.js"></script>
</head>
<body>
<%@include file="top.jsp" %>
<div class="jianxi"></div>
    <div id="wrapper">
		<!-- 头左侧菜单-->
		<%@include file="menu.jsp" %>
        <!-- /. NAV SIDE  -->
        <div id="page-wrapper" >
			<div id="page-inner">
                <div class="container"style="width:1000px">
					    <div>
					        <br/>
					        <!-- Nav tabs -->
					        <ul class="nav nav-tabs" role="tablist" id="myTabs">
					            <li role="presentation" class="active">
					              <a href="#queryUser" aria-controls="queryUser" role="queryUser" data-toggle="queryUser">查看用户</a>                                        
								</li>
					            <li role="presentation">
					            <a href="#adduser" aria-controls="adduser" role="addUser" data-toggle="addUser">添加用户</a>
					            </li>
					        </ul>
					
					        <!-- Tab panes -->
					        <div class="tab-content">
					            <div role="tabpanel" class="tab-pane" id="adduser">
					                <br/>
					                <div class="form-horizontal">
					                    <div class="form-group">
					                        <label for="userid" class="col-sm-2 control-label">用户ID</label>
					                        <div class="col-sm-10">
					                            <input type="text" class="form-control" id="userid" placeholder="用户ID">
					                        </div>
					                    </div>
					                    <div class="form-group">
					                        <label for="username" class="col-sm-2 control-label">用户姓名</label>
					                        <div class="col-sm-10">
					                            <input type="text" class="form-control" id="username" placeholder="用户姓名">
					                        </div>
					                    </div>
					                    <div class="form-group">
					                        <label for="password" class="col-sm-2 control-label">密码</label>
					                        <div class="col-sm-10">
					                            <input type="password" class="form-control" id="password" placeholder="密码">
					                        </div>
					                    </div>
					                    <div class="form-group">
					                        <label for="usertype" class="col-sm-2 control-label">用户类型</label>
					                        <div class="col-sm-10">
					                            <select class="form-control" id="usertype">
					                                <option>测试</option>
					                                <option>开发</option>
					                                <option>产品</option>
					                                <option>前端</option>
					                                <option>运维</option>
					                            </select>
					                        </div>
					                    </div>
					                    <div class="form-group" align="center">
					                        <div class="col-sm-offset-2 col-sm-10">
					                            <button class="btn btn-primary" id="addbtn">添加</button>
					                        </div>
					                    </div>
					                </div>
					            </div>
					            <div role="tabpanel" class="tab-pane active" id="queryUser">
                        <br/>
                        <table class="table table-striped table-bordered table-hover" >
                            <thead>
                                <tr>
                                    <th style="width:200px">序号</th>
                                    <th style="width:300px">用户名</th>
                                    <th style="width:300px">真实姓名</th>
                                    <th style="width:300px">所属组别</th>
                                    <th style="width:300px">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${resultUserList }" var="user" varStatus="status">
                            	<tr>
                                    <td>${status.count}</td>
                                    <td>${user.userid}</td>
                                    <td>${user.username}</td>
                                    <td>${user.userType}</td>
                                    <td>
									<a href="#" class="btn btn-warning" onclick="updateUser('${user.userid}')">修改</a>
									<a href="#" class="btn btn-danger"onclick="deleteUser('${user.userid}')">删除</a>
									</td>
                                </tr>
                            </c:forEach>
                            </tbody>
                        </table>

                <!-- /. ROW  -->

								</div>
					        </div>
					    </div>
				</div>         
			</div>
        </div>
	</div>
	<!-- 底部 -->
	<%@include file="footer.jsp" %>
</body>
<script type="text/javascript">
    $(function () {
        $("#addbtn").click(function () {
            $("#addbtn").attr("disabled","disabled");
            var userid = $("#userid").val();
            var username = $("#username").val();
            var password = $("#password").val();
            var usertype = $("#usertype").val();
            if (isNotNull(userid) && isNotNull(username) && isNotNull(password) && isNotNull(usertype)) {
                $.ajax({
                    url: "../admin/insert",
                    type: "post",
                    data: "userid=" + userid + "&username=" + username + "&password=" + password + "&userType=" + usertype,
                    success: function (result) {
                        alert(result);
                            $("#addbtn").removeAttr("disabled");
                    }
                });
            }
        });
    });


    $('#myTabs a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    })
</script>
</html>